<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>

    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-form-model-item label="位次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ranked">
        <a-input-number placeholder="位次"  v-model="model.ranked"  style="width: 100%"/>
      </a-form-model-item>

      <a-form-model-item label="请选择教师" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teacherId">
        <j-select-user-by-dep v-model="model.teacherId" @change="selectedUser" :multi="false"></j-select-user-by-dep>
      </a-form-model-item>

      <a-form-model-item label="教工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
        <a-input placeholder="教工号"  v-model="model.teacherId" :disabled="true"/>
      </a-form-model-item>

      <a-form-model-item label="所属学院" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
        <a-input placeholder="所属学院"  v-model="model.depName" :disabled="true"/>
      </a-form-model-item>

    </a-form-model>


    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit"  type="primary" :loading="confirmLoading">添加</a-button>
    </div>
  </a-drawer>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { getAction ,httpAction} from '@/api/manage'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'


export default {
  name: "UserModal",
  components: {
    JSelectUserByDep
  },
  props: {
    matchType: String,
    ranked: Number,
  },
  data () {
    return {
      disableSubmit: false,
      title:"操作",
      drawerWidth:700,
      visible: false,
      modaltoggleFlag:true,
      validatorRules: {},
      confirmLoading: false,
      model: this.data,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      urls: {
        getDepUrl:"/common/memberList/queryDepartmentByUserName",
      }
    }
  },
  created () {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token":token};

  },
  computed:{

  },
  methods: {
    add () {
      this.refresh();
      this.edit({matchType:this.matchType, ranked:this.ranked});

    },
    edit (record) {
      console.log(record);
      let that = this;
      that.visible = true;
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize();
      that.model = Object.assign({}, record);


    },
    handleCancel () {

      this.close()
    },
    refresh () {

    },
    //窗口最大化切换
    toggleScreen(){
      if(this.modaltoggleFlag){
        this.modalWidth = window.innerWidth;
      }else{
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    close () {
      this.$emit('close');
      this.visible = false;
      this.disableSubmit = false;

      this.$refs.form.resetFields();
    },
    handleSubmit () {
      that.$emit('ok', this.model);
      // const that = this;
      // // 触发表单验证
      // that.confirmLoading = true;
      // let httpurl = '';
      // let method = '';
      // if(!this.model.id){
      //   httpurl+=this.urls.add;
      //   method = 'post';
      // }else{
      //   httpurl+=this.urls.edit;
      //   method = 'put';
      // }
      // httpAction(httpurl,this.model,method).then((res)=>{
      //   if(res.success){
      //     that.$message.success(res.message);
      //     that.$emit('ok');
      //   }else{
      //     that.$message.warning(res.message);
      //   }
      // }).finally(() => {
      //   that.confirmLoading = false;
      //   that.close();
      // })
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     //todo
      //   }
      //
      // })
      // this.$emit('ok');
      // this.close();
    },
    selectedUser(teacherId){
      console.log("选择的用户为：" + teacherId);
      this.model.teacherId = teacherId;
      this.queryDep(teacherId);
    },
    resetScreenSize(){
      let screenWidth = document.body.clientWidth;
      if(screenWidth < 500){
        this.drawerWidth = screenWidth;
      }else{
        this.drawerWidth = 700;
      }
    },
    queryDep(teacherId){


      console.log(this.urls.getDepUrl)

      getAction(this.urls.getDepUrl ,{userName: teacherId}).then((res)=>{
        if(res.success){
          console.log(res.result);
          this.model.orgId = res.result.orgCode;
          this.model.depName = res.result.departName;
        }else{
          this.$message.warning(res.message);
        }
      }).finally(() => {
        console.log("finally")
      })
    },
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width:104px;
  height:104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td{
  padding-top:10px;
  padding-bottom:10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>